<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文案馆</title>
    <link rel="stylesheet" href="./../moudles/bootstrap-5.1.3-dist/css/bootstrap.css">
    <script src="./../moudles/bootstrap-5.1.3-dist/js/bootstrap.bundle.js"></script>
    <style>
        #grad1 {
            height: 200px;
            background-color: rgb(0, 255, 255);
            background-image: linear-gradient(#1ae5f3, #1ae5f3(11, 250, 230));
        }
    </style>
</head>

<body id="grad1">
    <!-- 整个骨架，容器：container-->
    <div class="container-fluid border">
        <!-- row样式  将占满整个屏幕-->
        <div class="row">
            <div class="col-2 border">
                <img class="mx-auto d-block" src="./../moudles/bootstrap-5.1.3-dist/icons/apple.svg" width="50" </div>
            </div>
            <div class="col border">
                <div class="input-group my-1">
                    <input type="text" class="form-control">
                    <img class="input-group-text" src="./../moudles/bootstrap-5.1.3-dist/icons/search.svg" alt=""></div>
            </div>

            <div class="col-2 border">
                <div class="my-1 mx-2">
                    <a href="./../HTML/test01.html"><button class="btn btn-primary">登录</button></a>
                    <a href="./../HTML/test.html"><button class="btn btn-warning">注册</button></a>
                </div>
            </div>
        </div>
        <!--第二行 -->
        <div class="row">
            <div class="col-2 border">
                <ul class="nav flex-column mx-4 px-3 ">
                    <li class="nav-item">
                        <a class="nav-link" href=""> <img src="./../moudles/bootstrap-5.1.3-dist/icons/grid-fill.svg"> 分类</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href=""><img src="./../moudles/bootstrap-5.1.3-dist/icons/chat-square-heart.svg"> 赞过</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href=""><img src="./../moudles/bootstrap-5.1.3-dist/icons/chat-square-text.svg"> 评论过</a>
                    </li>
                </ul>
            </div>
            <div class="col border">
                <div class="border-bottom mb-3">
                    <!-- 标题行 -->
                    <div><a href="" class="fs-3">inspirational</a></div>
                    <div class="row">
                        <!-- 放头像 -->
                        <div class="col-1">
                            <img src="./../moudles/bootstrap-5.1.3-dist/icons/robot.svg" width="70px">
                        </div>
                        <!-- 放简介 -->
                        <div class="col  ps-4">
                            永远喜欢鲜花喜欢仪式感， 喜欢惊喜扑面而来的感觉， 也喜欢每天过着普普通通又闪闪发光的生活， 可以在黄昏落日时分一起牵手出门散步， 路过超市奶茶店买最爱的零食奶茶。 不用着急慢慢来没关系， 爱是一遍又一遍的不同瞬间的重复心动。
                        </div>
                    </div>
                    <!-- 基本信息 -->
                    <div class="row">
                        <div class="col"><a href="">文案馆</a></div>
                        <div class="col-3">2022年3月8日 16:30:00</div>
                        <div class="col"><img src="./../moudles/bootstrap-5.1.3-dist/icons/heart.svg"> 123</div>
                        <div class="col"><img src="./../moudles/bootstrap-5.1.3-dist/icons/chat-square-text.svg"> 456</div>
                        <div class="col"><img src="./../moudles/bootstrap-5.1.3-dist/icons/eye.svg"> 789</div>
                    </div>
                </div>
                <div class="border-bottom mb-3">
                    <!-- 标题行 -->
                    <div><a href="" class="fs-3">inspirational</a></div>
                    <div class="row">
                        <!-- 放头像 -->
                        <div class="col-1">
                            <img src="./../moudles/bootstrap-5.1.3-dist/icons/robot.svg" width="70px">
                        </div>
                        <!-- 放简介 -->
                        <div class="col  ps-4">
                            无数次，梦里都是你穿婚纱的样子，我永远站在来宾席看着，如果台上的是我就好了
                        </div>
                    </div>
                    <!-- 基本信息 -->
                    <div class="row">
                        <div class="col"><a href="">文案馆</a></div>
                        <div class="col-3">2022年3月8日 16:30:00</div>
                        <div class="col"><img src="./../moudles/bootstrap-5.1.3-dist/icons/heart.svg"> 123</div>
                        <div class="col"><img src="./../moudles/bootstrap-5.1.3-dist/icons/chat-square-text.svg"> 456</div>
                        <div class="col"><img src="./../moudles/bootstrap-5.1.3-dist/icons/eye.svg"> 789</div>
                    </div>
                </div>
                <div class="border-bottom mb-3">
                    <!-- 标题行 -->
                    <div><a href="" class="fs-3">inspirational</a></div>
                    <div class="row">
                        <!-- 放头像 -->
                        <div class="col-1">
                            <img src="./../moudles/bootstrap-5.1.3-dist/icons/robot.svg" width="70px">
                        </div>
                        <!-- 放简介 -->
                        <div class="col  ps-4">
                            你眼里自己是个什么样的人 和别人印象里的你是个什么样的人 是完完全全的两码事 你永远也不会知道自己眼里很“正常”的“自己” 在别人嘴里会被评价成什么样子 多离谱都有可能 反正这种准备都要提前做好 才能少点伤心难过不解气愤之类的
                        </div>
                    </div>
                    <!-- 基本信息 -->
                    <div class="row">
                        <div class="col"><a href="">文案馆</a></div>
                        <div class="col-3">2022年3月8日 16:30:00</div>
                        <div class="col"><img src="./../moudles/bootstrap-5.1.3-dist/icons/heart.svg"> 123</div>
                        <div class="col"><img src="./../moudles/bootstrap-5.1.3-dist/icons/chat-square-text.svg"> 456</div>
                        <div class="col"><img src="./../moudles/bootstrap-5.1.3-dist/icons/eye.svg"> 789</div>
                    </div>
                </div>
            </div>

            <div class="col-2 border">
                <div>本周爱情指数星座排行</div>
                <ol>
                    <li>摩羯座</li>
                    <li>双鱼座</li>
                    <li>处女座</li>
                </ol>
            </div>

        </div>


</body>

</html>